<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小米账号-注册</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				width: 100%;
				height: 100%;
				background-color: #F9F9F9;
				font-size: 14px;
				color: #666;
			}
			
			.page-main {
				width: 786px;
				height: 599px;
				background: #FFF;
				margin-left: auto;
				margin-right: auto;
			}
			
			.page-main .title {
				width: 786px;
				height: 58px;
				padding-bottom: 30px;
			}
			
			.page-main .title .logo {
				background: url(img/register-logo.png) no-repeat;
				width: 49px;
				height: 48px;
				margin: 0 auto;
				display: block;
				cursor: pointer;
			}
			
			.page-main .header h4 {
				font-weight: normal;
				color: #333;
				text-align: center;
				font-size: 30px;
				width: 100%;
				height: 45px;
				display: block;
			}
			
			.main {
				width: 332px;
				height: 406px;
				min-height: 400px;
				margin: 0 auto;
				padding-top: 30px;
			}
			
			.main .div-1 .country {
				color: #333;
				padding-bottom: 5px;
				font-weight: normal;
			}
			
			.main .div-11 .country-container {
				height: 270px;
				width: 100%;
				line-height: 30px;
				border: 1px solid #e8e8e8e;
				overflow-x: hidden;
				overflow-y: auto;
				position: absolute;
				left: 0;
				top: 41px;
				z-index: 100;
			}
			
			.main .div-2 {
				height: 40px;
				line-height: 40px;
				border: 1px solid #e8e8e8;
				display: inline-block;
				width: 316px;
				color: #555;
				padding-left: 14px;
			}
			
			.main .div-2 img {
				float: right;
				margin-top: 12px;
				margin-right: 12px;
			}
			
			.main .div-2>p {
				float: left;
				width: 275px;
				border-right: 1px solid #e8e8e8;
				cursor: pointer;
			}
			
			.main .div-3-tip {
				line-height: 20px;
				margin-bottom: 15px;
			}
			
			.main .number,
			.yanzhengma {
				padding-bottom: 5px;
				font-weight: normal;
				color: #333;
				line-height: 20px;
			}
			
			.main .number-box {
				border: 1px solid #e8e8e8;
				height: 40px;
				margin-bottom: 15px;
			}
			
			.display-box {
				width: 54px;
				height: 40px;
				border: 1px solid #e8e8e8;
				padding: 0 9px;
				float: left;
				position: relative;
			}
			
			.display-box p {
				float: left;
				width: auto;
				display: inline-block;
				width: 30px;
				height: 40px;
				line-height: 40px;
			}
			
			.display-box img {
				float: left;
				position: absolute;
				top: 2px;
			}
			
			.iphonenum {
				display: inline-block;
				float: right;
				position: relative;
			}
			
			.iphonenum input {
				width: 236px;
				height: 20px;
				padding: 10px;
				line-height: 40px;
				border: 0;
				outline: none;
				background: white;
			}
			
			.main .div-7 {
				width: 450px;
				height: 42px;
				line-height: 40px;
				margin-bottom: 15px;
				display: inline-block;
			}
			
			.main .div-7 img {
				float: left;
			}
			
			.main .div-7 input {
				width: 168px;
				height: 20px;
				line-height: 20px;
				padding: 10px;
				color: #333;
				outline: none;
				float: left;
			}
			
			.main .div-8 .register {
				background-color: #ff6700;
				margin-top: 15px;
				border: 1px solid rgba(186, 186, 186, 0.3);
				color: white;
				width: 330px;
				height: 42px;
				margin: 0 auto;
				cursor: pointer;
				line-height: 42px;
				text-align: center;
			}
			
			.main .message {
				margin-top: 10px;
				color: #9d9d9d;
			}
			
			.main .message a {
				color: #333;
				font-weight: bold;
				text-decoration: none;
			}
			
			.footer {
				width: 1349px;
				height: 80px;
				margin-top: 10px;
				text-align: center;
				position: absolute;
				bottom: 0;
			}
			
			.footer ul {
				display: inline-block;
				list-style-type: none;
				height: 17px;
				text-align: center;
			}
			
			.footer ul li a {
				padding: 0 10px;
				text-decoration: none;
				color: #757575;
			}
			
			.footer ul li {
				float: left;
			}
			
			.footer p {
				height: 24px;
				padding: 10px;
				color: #757575;
			}
			/*提示*/
			.icon-error {
				width: 14px;
				height: 14px;
				line-height: 14px;
				background: #FF6700;
				color: white;
				font-weight: bold;
				text-align: center;
				border-radius: 50%;
				margin: -1px 5px 0 0;
				overflow: hidden;
				display: inline-block;
				vertical-align: middle;
			}
			/*下拉菜单*/
			.country-content1,
			.country-content {
				background: #fff;
				height: 270px;
				line-height: 30px;
				border: 1px solid #e8e8e8;
				width: 330px;
				overflow-x: hidden;
				overflow-y: auto;
				z-index: 100;
				display: none;
			}
			
			.country-content1 {
				position: absolute;
				left: 517px;
				top: 229px;
			}
			
			.country-content {
				position: absolute;
				left: 517px;
				top: 335px;
			}
			
			.search {
				padding: 10px;
			}
			
			.search-input {
				width: 274px;
				height: 22px;
				line-height: 22px;
				padding: 5px 10px 5px 10px;
				display: block;
				border: 1px solid #e0e0e0;
				background: none;
			}
			
			.row {
				padding: 0 10px;
				line-height: 39px;
				clear: both;
				overflow: hidden;
				color: #000;
				border-bottom: 1px solid #e0e0e0;
				cursor: pointer;
				height: 39px;
			}
			.row:hover{
				background: #EAEAEA;
			}
			.row-left {
				float: left;
				max-width: 74%;
				color: #000;
				cursor: pointer;
			}
			
			.row-right {
				float: right;
				max-width: 20%;
				color: #9d9d9d;
			}
			
			.cy-title {
				background: #fcdecc;
				padding-left: 10px;
				margin-bottom: 6px;
				line-height: 30px;
				color: #ef5b00;
			}
		</style>
	</head>

	<body>
		<div class="body">
			<div class="page-main">
				<div class="title">
					<a href="#" class="logo"></a>
				</div>
				<div class="header">
					<h4>注册小米账号</h4>
				</div>
				<form id="tijiao">
					
				<div class="main">
			
					<div class="div-1">
						<h4 class="country">国家/地区</h4>
					</div>
					<div class="div-11">
						<div class="country-container" style="display:none;">
						</div>
					</div>
					<div class="div-2">
						<p class="select-country">中国</p>
						<img src="img/register.11.png" />
					</div>
					<div class="country-content1">
						<div class="search">
							<input type="text" class="search-input"  name="search"/>
						</div>
						<div class="country-list">
							<div class="usually">
								<div class="cy-title">
									常用
								</div>
								<ul>
									<li class="row">
										<span class="row-left">中国</span>
									</li>
									<li class="row">
										<span class="row-left">中国台湾</span>
									</li>
									<li class="row">
										<span class="row-left">中国香港</span>
									</li>
									<li class="row">
										<span class="row-left">Brazil</span>
									</li>
									<li class="row">
										<span class="row-left">India</span>
									</li>
									<li class="row">
										<span class="row-left">Indonesia</span>
									</li>
									<li class="row">
										<span class="row-left">India</span>
									</li>
									<li class="row">
										<span class="row-left">Malaysia</span>
									</li>
								</ul>

							</div>
							<div class="usually">
								<div class="cy-title">
									A
								</div>
								<ul>
									<li class="row">
										<span class="row-left">Andorra</span>
									</li>
									<li class="row">
										<span class="row-left">Afghanistan</span>
									</li>
									<li class="row">
										<span class="row-left">Antigua and Barbuda</span>
									</li>
									<li class="row">
										<span class="row-left">Antigua</span>
									</li>
									<li class="row">
										<span class="row-left">Albania</span>
									</li>
									<li class="row">
										<span class="row-left">Indonesia</span>
									</li>
									<li class="row">
										<span class="row-left">India</span>
									</li>
									<li class="row">
										<span class="row-left">Malaysia</span>
									</li>
								</ul>

							</div>

						</div>
					</div>
					<div class="div-3-tip">
						成功注册帐号后，国家/地区将不能被修改
					</div>
					<div class="div-4">
						<h4 class="number">手机号码</h4>
					</div>
					<div class="div-5">
						<div class="number-box">
							<div class="display-box">
								<p class="select-num">+86</p>
								<img src="img/register.quhao.png">
							</div>
							<div class="country-content">
								<div class="search">
									<input type="text" class="search-input"  name="search1"/>
								</div>
								<div class="country-list">
									<div class="usually">
										<div class="cy-title">
											常用
										</div>
										<ul>
											<li class="row">
												<span class="row-left">中国</span>
												<span class="row-right">+86</span>
											</li>
											<li class="row">
												<span class="row-left">中国台湾</span>
												<span class="row-right">+886</span>
											</li>
											<li class="row">
												<span class="row-left">中国香港</span>
												<span class="row-right">+852</span>
											</li>
											<li class="row">
												<span class="row-left">Brazil</span>
												<span class="row-right">+55</span>
											</li>
											<li class="row">
												<span class="row-left">India</span>
												<span class="row-right">+91</span>
											</li>
											<li class="row">
												<span class="row-left">Indonesia</span>
												<span class="row-right">+62</span>
											</li>
											<li class="row">
												<span class="row-left">India</span>
												<span class="row-right">+91</span>
											</li>
											<li class="row">
												<span class="row-left">Malaysia</span>
												<span class="row-right">+60</span>
											</li>
										</ul>

									</div>
									<div class="usually">
										<div class="cy-title">
											A
										</div>
										<ul>
											<li class="row">
												<span class="row-left">Andorra</span>
												<span class="row-right">+376</span>
											</li>
											<li class="row">
												<span class="row-left">Afghanistan</span>
												<span class="row-right">+93</span>
											</li>
											<li class="row">
												<span class="row-left">Antigua and Barbuda</span>
												<span class="row-right">+1</span>
											</li>
											<li class="row">
												<span class="row-left">Antigua</span>
												<span class="row-right">+1</span>
											</li>
											<li class="row">
												<span class="row-left">Albania</span>
												<span class="row-right">+355</span>
											</li>
											<li class="row">
												<span class="row-left">Indonesia</span>
												<span class="row-right">+62</span>
											</li>
											<li class="row">
												<span class="row-left">India</span>
												<span class="row-right">+91</span>
											</li>
											<li class="row">
												<span class="row-left">Malaysia</span>
												<span class="row-right">+60</span>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<label class="iphonenum">
								<input type="text" id="11num" value=""  placeholder="请输入手机号码"/>
							</label>
							<div class="tips" id="tip-1" style="display: none;">
								<span class="icon-error">!</span>
								<span class="icon-con">请输入手机号码</span>
							</div>
							<div class="tips" id="tip-2" style="display: none;">
								<span class="icon-error">!</span>
								<span class="icon-con">手机号码格式错误</span>
							</div>
						</div>
					</div>
					<div class="div-6">
						<h4 class="yanzhengma">图形验证码</h4>
					</div>
					<div class="div-7">
						<label class="label-box"><input type="text" id="yanzheng" value=""  placeholder="图片验证码" name="yanzheng"/></label>
						<img src="img/ register-yanzhengma.jpg" />
					</div>
					<div class="tips" id="tip-3" style="display: none;">
						<span class="icon-error">!</span>
						<span class="icon-con">请输入图片验证码</span>
					</div>
					<div class="tips" id="tip-4" style="display: none;">
						<span class="icon-error">!</span>
						<span class="icon-con">图片验证码错误</span>
					</div>
					<div class="div-8">
						<div class="register">
							立即注册
						</div>
					</div>
					<p class="message">注册帐号即表示您同意并愿意遵守小米
						<a href="#">用户协议</a>和
						<a href="#">隐私政策</a>
					</p>
				</div>
				</form>
			</div>
		</div>
		<div class="footer">
			<ul>
				<li>
					<a href="#">简体</a>|</li>
				<li>
					<a href="#">繁体</a>|</li>
				<li>
					<a href="#">English</a>|</li>
				<li>
					<a href="#">常见问题</a>
				</li>
			</ul>
			<p><span>小米公司版权所有-京ICP备10046444-
             	<img src="img/footer-img.png"/>京公网安备11010802020134号-京ICP证110507号</span></p>
		</div>

		<script type="text/javascript">
			/*
			 * 下拉列表
			 */
			var cc1 = document.querySelector(".country-content1");
			document.querySelector(".div-2").onclick = function() {
				cc1.style.display = "block";
			}
			
			var cc2 = document.querySelector(".country-content");
			document.querySelector(".display-box").onclick = function() {
				cc2.style.display = "block";
			}
			var sc = document.querySelector(".select-country");//国家框
			var lis1 = document.querySelectorAll(".country-content1 li");
            for (var i = 0; i < lis1.length; i++) {
            	lis1[i].onclick = function  () {
            		 sc.innerHTML = this.children[0].innerHTML;
				cc1.style.display = "none";
            	}
            }
            var num = document.querySelector(".select-num");//区号框
            var lis2 = document.querySelectorAll(".country-content li");
             for (var i = 0; i < lis2.length; i++) {
            	lis2[i].onclick = function  () {
            		 num.innerHTML = this.children[1].innerHTML;
				cc2.style.display = "none";
            	}
            }
			//立即注册
			var register = document.querySelector(".register");
			var tip1 = document.getElementById("tip-1");
			var tip2 = document.getElementById("tip-2");
			register.onclick = function logon() {
				var num = document.getElementById("11num");
				var reg = /^1[^01269][0-9]{9}$/;
				if(num.value.trim() == "") {
					tip1.style.display = "block";
				} else if(!reg.test(num.value)) {
					tip1.style.display = "none";
					tip2.style.display = "block";
				} else {
					tip1.style.display = "none";
					tip2.style.display = "none";
				}
                document.getElementById("tijiao").submit();
			}

			//图片验证码 
			var yanzheng = document.getElementById("yanzheng");
			var tip3 = document.getElementById("tip-3");
			var tip4 = document.getElementById("tip-4");
			yanzheng.onblur = function() {
				var reg1 = /^([0-9]|[A-z]){5}$/;
				if(yanzheng.value.trim() == "") {
					tip3.style.display = "block";
				} else if(!reg1.test(this.value)) {
					tip4.style.display = "block";
				}
			}
			yanzheng.onfocus = function() {
				tip3.style.display = "none";
				tip4.style.display = "none";
			}
		</script>
	</body>

</html>